<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>移动的球</title>
    <style>
    .ball {
        width: 100px;
        height: 100px;
        position: relative;
        top: 0;
        left: 0;
        border-radius: 100%;
        background: #9C27B0;
        background: radial-gradient(circle at 50% 120%, #ffeb3b, #ffc107 10%, #ff9800 80%, #ff5722 100%);
    }
    .ball:before {
        content: "";
        position: absolute;
        top: 1%;
        left: 5%;
        width: 90%;
        height: 90%;
        border-radius: 50%;
        background: radial-gradient(circle at 50% 0px, #fff, rgba(255, 255, 255, 0) 58%);
        filter: blur(5px);
        z-index: 2;
    }
    </style>
</head>

<body>
    <div class="ball" id="ball"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(function() {
        var $ball = $("#ball");
        var thisW = $ball.width();
        var thisH = $ball.height();
        var ww = $(window).width();
        var wh = $(window).height();

        var left = parseInt($ball.css("left"));
        var top = parseInt($ball.css("top"));
        $ball.on("mousedown.drap", function(e) {
            var x = e.pageX - left;
            var y = e.pageY - top;
            $(document).on("mousemove.drap", function(e) {
                // e.preventDefault();
                var moveX = e.pageX - x;
                var moveY = e.pageY - y;
                if (moveY >= wh - thisH) {
                    moveY = wh - thisH;
                }
                if (moveY <= 0) {
                    moveY = 0;
                }
                if (moveX >= ww - thisW) {
                    moveX = ww - thisW;
                }
                if (moveX <= 0) {
                    moveX = 0;
                }
                $ball.css({
                    "top": moveY,
                    "left": moveX
                });
            });
            $(document).on("mouseup.drap", function(e) {
                // e.preventDefault();
                $(this).off(".drap");
                left = parseInt($ball.css("left"));
                top = parseInt($ball.css("top"));
            });
        });
    });
    </script>
</body>

</html>